<style>
     .template-item {
        position: relative;
        margin-bottom: 10px;
    }
    .template-item img {
        max-width: 100%;
        height: auto;
        cursor: pointer;
    }
   .template-item .ivu-icon-md-checkmark-circle {
        position: absolute;
        top: 2px;
        right: 5px;
    }
    .template-item h4{
        margin-top: 10px;
        font-size: 18px;
        height: 36px;
    }
</style>
<template>
    <div>
        <header class="admin-container-header clearfix">
            <div class="header-group">
                <h4 class="title">设置</h4> <h5 class="sub-title">网站模板</h5>
            </div>
        </header>
        <main class="admin-container-body" style="height: calc(100% - 50px)">
            <div class="row">
                <div class="col-md-4" v-for='item in templateList'>
                    <section class="panel-box">
                        <section class="panel-box-body template-item">
                            <Icon type="md-checkmark-circle" v-if='item.status' size='26' color='#00aaee'></Icon>
                            <img :src="'{$domainStatic}/{$tplPath}/' + item.fileName + item.info.thumbnail" @click='chooseTemplate(item.fileName)'/>
                            <h4 class="p-1">模板名称：{{item.fileName}} <a href="{$domain}/themeEdit" target="_blank" class="float-right" v-if='item.status && item.isThemeEdit'>编辑</a><a href="{$domain}/build" target="_blank" class="float-right" v-if='item.status && item.isBuild'>编辑</a></h4>
                        </section>
                    </section>
                </div>
            </div>
        </main>
    </div>
</template>

<script>
export default {
    data () {
        return {
            templateList: [],
            siteInfo: '',
        }
    },
    watch: {
        siteChangeStatus() {
            this.getSettingData();
        }
    },
    mounted() {
        this.getSettingData();
    },
    methods: {
        getTemplateList() {
            var templateListUrl  = '{$domain}/setting/ApiAdminTemplate/templateList';
            this.$ssy.ajax(templateListUrl, {
            }).then(res => {
                if(res.code == 1) {
                    var templateList = res.data;
                    for (var i = 0; i < templateList.length; i++) {
                        if (templateList[i].fileName == this.siteInfo.template) {
                            templateList[i].status = true;
                        } else {
                            templateList[i].status = false;
                        }
                    }
                    this.templateList = templateList;
                }
            });
        },
        getSettingData() {
            this.loading = true;
            this.$ssy.ajax('{$domain}/setting/ApiAdminSetting/settingSelect', {
            }).then(res => {
                this.loading = false;
                if(res.code == 1) {
                    this.siteInfo = res.data;
                    this.getTemplateList();
                }
            });
        },
        chooseTemplate(val) {
            this.$Modal.confirm({
                title: '消息提示',
                content: '<p>确定切换成您选择的模板？</p>',
                onOk: () => {
                    this.$ssy.ajax('{$domain}/setting/ApiAdminTemplate/templateSave', {
                        fileName: val,
                    }).then(res => {
                        if(res.code == 1) {
                            this.$Message.success('设置成功');
                            this.getSettingData();
                        }
                    });
                }, 
                onCancel: () => {
                }
            });
        },

    }
}
</script>
